<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>系统设置 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css?t=a1">
   <style>
      .el-header {
         background-color: #B3C0D1;
         color: #333;
         line-height: 60px;
      }

      .el-aside {
         color: #333;
      }

      html,
      body,
      #app,
      .el-container {
         padding: 0px;
         margin: 0px;
         height: 100%;
      }

      .my-layout-admin {
         position: fixed;
         top: 50px;
         left: 220px;
         right: 0px;
         bottom: 0px;
      }

      .mydmin-iframe {
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
      }

      /* 菜单后面小三角的图标颜色 */
      .el-submenu__title i {
         color: #eee;
      }
   </style>
</head>

<body>
   <div id="app">

      <el-container style="height: 100%; border: 0px solid #eee;">
         <el-aside width="220px" style="background-color: #eee; font-weight: 900;">
            <el-menu :default-active="menuValue" unique-opened class="el-menu-vertical-demo" @select="handleSelect"
               background-color="#eee" text-color="#333" active-text-color="#409eff" style="border: 0px;margin-top: 20px;">
               <el-menu-item index="org" style="font-size: 1.0rem;">
                  <i class="el-icon-menu"></i>
                  <span slot="title">组织机构</span>
               </el-menu-item>
               <el-menu-item index="role" style="font-size: 1.0rem;">
                  <i class="el-icon-coordinate"></i>
                  <span slot="title">权限角色设置</span>
               </el-menu-item>
               <el-menu-item index="option" style="font-size: 1.0rem;">
                  <i class="el-icon-set-up"></i>
                  <span slot="title">选项值设置</span>
               </el-menu-item>
               <el-menu-item index="settings" style="font-size: 1.0rem;">
                  <i class="el-icon-setting"></i>
                  <span slot="title">系统参数</span>
               </el-menu-item>
            </el-menu>
         </el-aside>

         <el-container>
            <el-main style="padding: 3px;">
               <el-tabs v-model="tabsValue" type="card" @tab-click="selectTab" >
                  <el-tab-pane :key="item.name" v-for="(item, index) in tabsData" :label="item.title" :name="item.name"
                     :closable="item.close">

                     <div class="my-layout-admin">
                        <iframe :src="item.content" frameborder="0" class="mydmin-iframe"></iframe>
                     </div>

                  </el-tab-pane>
               </el-tabs>
            </el-main>
         </el-container>
      </el-container>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>

<script>
   var vm = new Vue({
      el: '#app',
      data: function () {
         var validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'));
            } else if (value !== this.repasswordData.newPassword1) {
               callback(new Error('两次输入密码不一致!'));
            } else {
               callback();
            }
         };
         return {
            sysconfig: {},             // 系统配置
            tabsValue: 'org',          // tab默认打开的页面 
            menuValue: 'org',          // 菜单项选中项 
            memberData: {},            // 用户的登录信息 

            // tab 数据
            tabsData: [{
               title: '组织机构',
               name: 'org',
               close: false,
               content: '/view/admin/sys/org_manager.html?t=arw'
            },
            {
               title: '权限角色设置',
               name: 'role',
               close: false,
               content: '/view/admin/sys/org_role.html?t=arw'
            },
            {
               title: '选项值设置',
               name: 'option',
               close: false,
               content: '/view/admin/sys/option_params.html?t=arw'
            },
            {
               title: '系统参数',
               name: 'settings',
               close: false,
               content: '/view/admin/sys/value_setting.html?t=arw'
            }],

            // 表单中的数据验证规则
            rules: {
               oldPassword: [
                  { required: true, trigger: 'blur', message: '该值不能为空' },
                  { min: 6, max: 20, trigger: 'blur', message: '长度在 6 到 20 个字符' }
               ],
               newPassword1: [
                  { required: true, trigger: 'blur', message: '该值不能为空' },
                  { min: 6, max: 20, trigger: 'blur', message: '长度在 6 到 20 个字符' }
               ],
               newPassword2: [
                  { required: true, trigger: 'blur', validator: validatePass }
               ]
            },

         }
      },
      computed: {
      },
      methods: {
         // 点击菜单项调用
         handleSelect(index, indexPath) {
            console.log('xxxxxxxxxxx' + index);
            console.log(indexPath);

            this.tabsValue = index;
         },

         // 选择 tab 项调用
         selectTab(obj) {
            console.log(obj);
            this.menuValue = obj.name;
         }, 

      },
   }); 

   // 自动执行，读取菜单数据等
   new function () {

      // 获取系统配置信息
      axios.get('/guest/base/sysconfig.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.sysconfig = response.data.bundle;
            } else {
               vm.sysconfig = {};
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });

      // 用户信息
      axios.get('/admin/sys/get_member_data.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.memberData = response.data.bundle;
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取登录信息失败！' + error);
         })

      // 读取参数信息至缓存
      axios.get('/admin/sys/get_option_params.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               console.log(response);
               sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
         })

   };

</script>

</html>